@import '../core/base';

// ------------------------ base variables ------------------------

// -------- colors -----------

// primary
$primary-color: #3388ff;
$primary-color-hover: #1979ff;
$primary-color-active: #2166db;

// error
$error-color: #f24e4e;
$error-color-hover: #d43f3f;
$error-color-active: #bf3030;

// warning
$warning-color: #ebc040;

// info
$info-color: $primary-color;

// success
$success-color: #53ab6b;

// ------------------------ base component variables ------------------------

// background color for `<body>`
$body-background: #0b0c0e;
// base background color for most components
$component-background: #181a20;
// background color for popup、modal components
$popup-background: #1f2129;
// background color for tips components
$tips-background: #272933;
// background color for progress type components
$progress-background: #4d4d4d;
// background color for input type components
$input-background: transparent;
// disabled
$disabled-background: rgba(#b3b3b3, 0.1);

// status color
$status-color-success: $success-color;
$status-color-error: $error-color;
$status-color-warning: $warning-color;
$status-color-processing: $primary-color;
$status-color-default: $primary-color;

// alarm color
$alarm-color-critical: $error-color;
$alarm-color-major: #fa8241;
$alarm-color-minor: $warning-color;
$alarm-color-warning: #faec2a;

// feedback color, usage scenarios: alerts、 messages、 message boxes
$feedback-color-error: $error-color;
$feedback-color-warning: $warning-color;
$feedback-color-info: $info-color;
$feedback-color-success: $success-color;

// text color
$text-color: #e6e6e6; // main text
$text-color-secondary: #b3b3b3; // secondary text、label
$text-color-tertiary: #808080; // auxiliary text、placeholder text
$text-color-hint: #4d4d4d;
$text-color-inverse: #000000;
$text-color-special: #ffffff;
$text-color-link: $primary-color;
$text-color-error: $error-color;
$text-color-disabled: rgba($text-color-tertiary, 0.5);

// selection status for page
$selection-color: $primary-color;
$selection-background-color: rgba($color-primary, 0.06);
$selection-background-color-hover: rgba($color-primary, 0.06);

// The background colors for active or hover or selected states for things like
// list items or table cells.
$item-background-hover: rgba(#ffffff, 0.05);
$item-background-active: rgba($primary-color, 0.06);
$item-background-selected: rgba($primary-color, 0.06);

// border rules
$border-color-base: #333333; // 线框类组件的边框颜色
$border-color-secondary: #4d4d4d; // 按钮类组件的边框颜色
$border-color-split: #262626; // split line inside more component
$border-color-disabled: rgba(#e6e6e6, 0.1); // disabled status line inside more component
$border-color-focus: rgba($primary-color, 0.3);
$border-color-hover: #808080;
$border-color-active: $primary-color;
$border-focus: $border-width-focus $border-style-base $border-color-focus; // focus

$separate-line-color: rgba(#ffffff, 0.15); // 分割线

// icon
$icon-color: #808080;
$icon-color-secondary: #808080;
$icon-color-hover: $primary-color;
$icon-color-active: $primary-color-active;
$icon-color-focus: $primary-color-active;
$icon-color-disabled: rgba($icon-color, 0.5);
$icon-color-inverse: #ffffff;

// shadow
$shadow-color-base: #000000;
$shadow-color: rgba($shadow-color-base, 0.5);
$shadow-color-secondary: rgba($shadow-color-base, 0.1); // shadow color for a table
$shadow-color-tertiary: rgba($shadow-color-base, 0.07); // shadow color for tooltip shadow
$shadow-none: none;
$shadow-xs: 0 0.01rem 0.04rem 0 $shadow-color;
$shadow-sm: 0 0.02rem 0.08rem 0 $shadow-color; // shadow for select
$shadow-md: 0 0 0.15rem 0 $shadow-color; // shadow for modal/popup
$shadow-lg: 0 -0.04rem 0.15rem 0 $shadow-color; // shadow for drawer

// -------- component scroll -----------
$component-scrollbar-background: transparent;
$component-scrollbar-thumb-background: #333333; // 特殊背景, 不通用
$component-scrollbar-thumb-hover-background: #808080; // 特殊背景, 不通用
$component-scrollbar-thumb-active-background: #808080; // 特殊背景, 不通用
$component-scrollbar-thumb-border-color: $popup-background;

// ------------------------ component variables ------------------------

// -------- OverLay -----------
$overlay-backdrop-bg-color: rgba(0, 0, 0, 0.5);

// -------- Button -----------
$lv-btn-primary-text-color: $text-color-special;
$lv-btn-primary-bg-color-hover: #1979ff;
$lv-btn-primary-bg-color-active: #2166db;
$lv-btn-default-text-color-active: #2166db;
$lv-btn-link-text-color-hover: #1979ff;
$lv-btn-link-text-color-active: #2166db;

// -------- Input -----------
$input-count-color: $text-color-tertiary;

// -------- Tree -----------
$tree-border-color-split: #4d4d4d;

// -------- tag --------------
$tag-item-bg-color: #333333;
$tag-item-bg-color-hover: #404040;
$tag-item-bg-color-active: rgba($primary-color, 0.3);
$tag-item-bg-color-disabled: rgba($tag-item-bg-color, 0.5);
$tag-item-color-disabled: rgba($text-color, 0.5);
$tag-item-more-color-disabled: rgba($primary-color, 0.5);
$tag-item-alarm-color: $text-color-inverse;
$tag-item-remove-active: #2166db;

// -------- Checkbox -----------
$checkbox-selected-color: #e6e6e6;
$checkbox-selected-color-disabled: $text-color-disabled;

// -------- Wizard -----------
$wizard-step-number-color: $text-color-tertiary;
$wizard-step-number-process-color: $text-color-special;
$wizard-step-number-finish-color: $text-color-special;

// -------- Spinner ----------
$spinner-separate-line-color: #4d4d4d;
$spinner-separate-line-disabled-color: rgba(#4d4d4d, 0.5);

// -------- slider -----------
$slider-normal-bg-color: #4d4d4d;
$slider-active-color: #1979ff;
$slider-rail-hover-bg-color: #808080;
$slider-track-disabled-bg-color: #b3b3b3;
$slider-handle-bg-color: #0b0c0e;
$slider-handle-disabled-border-color: #4d4d4d;

// -------- InputIp -----------
$input-ip-separator-color: $text-color-tertiary;

// -------- Collapse -----------
$lv-collapse-header-bg-color: #1f2129;
$lv-collapse-body-bg-color: transparent;
$lv-collapse-body-border-color: $border-color-base;

// -------- Transfer -----------
$transfer-panel-background: #1f2129;
$transfer-panel-title-background: #272933;
$transfer-table-control-item-border-color: #262626;

// -------- Badge --------------
$badge-border-color: #1f2129;

// -------- List --------------
$list-item-meta-title-color: $text-color;
$list-item-meta-des-color: $text-color-secondary;
$list-item-extra: $text-color-secondary;
$list-border-color-split: $border-color-split;

// -------- Switch --------------
$switch-on-normal-bg-color: $primary-color;
$switch-on-disabled-bg-color: rgba($primary-color, 0.5);
$switch-normal-bg-color: #4d4d4d;
$switch-disabled-bg-color: rgba($switch-normal-bg-color, 0.5);

// -------- Card --------------
$card-border-color: rgba(255, 255, 255, 0.06);
$card-shadow-border-color: rgba(255, 255, 255, 0.06);
$card-shadow-color: #14151a;
$card-hover-box-shadow: none;
$card-disabled-opacity: 0.7;

// -------- Tabs -----------
$tabs-splitline-bg-color: #333333;
$tabs-bar-bg-color: #14151a;
$tabs-button-border-bottom-color: rgba(#ffffff, 0.05);
$tabs-item-active-bg-color: #181a20;
$tabs-underline-split-color: #333333;
$tabs-panel-shadow-dark: rgba(0, 0, 0, 0.35);
$tabs-panel-shadow-light: rgba(41, 41, 41, 0);

// -------- Autocomplete --------------
$lv-autocomplete-bg-color-hover: rgba(#ffffff, 0.05);

// -------- Upload --------------
$upload-tag-item-fill: #272933;
$upload-cell-color-bg-error: #e94949;
$upload-border-color-disabled: rgba(#e6e6e6, 0.1);
$upload-border-color-error: #e94949;

// -------- Table&&TreeTable --------------
$lv-table-header-bg-color: #1f2129;
$lv-table-header-bg-color-hover: rgba(#000000, 0.3);
$lv-table-header-icon-color-hover: #1979ff;
$lv-table-header-icon-color-active: #2166db;
$lv-table-header-sort-icon-color-hover: #ffffff;
$lv-table-border-color: #262626;
$lv-table-separate-line-bg-color: #4d4d4d;
$lv-table-unfold-table-header-bg-color: $component-background;

// -------- Select --------------
$select-option-bg-color: #1f2129;

// -------- Radio --------------
$radio-group-checked-background-disabled: rgba(#808080, 0.1);
$radio-button-disabled-border-color: rgba(#b3b3b3, 0.1);

// -------- InputIP --------------
$input-ip-text-color: #808080;

// -------- DatePicker --------------
$date-state-hover-bg-color: rgba(#3388ff, 0.06);
$date-picker-disable-color: #515257;
$date-picker-disable-border: 0.01rem #35373e solid;
$date-picker-disable-background: #3c3e45;
$date-picker-disable-range-point-background: #23242a;
$date-picker-disable-range-background: rgba(#808080, 0.1);
$date-picker-disabled-bg-color: rgba(#b3b3b3, 0.1);

// -------- Form --------------
$form-border-color-error: #f24e4e;

// -------- AdvancedFilter -----------------
$lv-advanced-filter-input-icon-color: #808080;
$lv-advanced-filter-input-bg-color: #000000;
$lv-advanced-filter-popover-bg-color: #1f2129;

// -------- DatePicker -----------------
$datepicker-default-input-color: #808080;

// -------- Loading -----------------
$loading-mask-bg-color: rgba(#000000, 0.5);
$loading-default-text-color: $text-color;
